﻿<template> 
        <transition name="fade"> 
           <div v-if="visible" :class="['message','message_'+type]">{{ message }}</div> 
        </transition> 
</template>

<script>
    import { ref, onMounted, defineComponent, defineExpose } from 'vue';

    export default defineComponent( {
     props: {
            message: {
                type: String,
                required: true,
        },
        type: {
            type: String,
            required: true,
        },
     },
    setup(prop) {
        // 使用ref来定义响应式数据
        const visible = ref(true);

        // 显示消息的方法
        const show = (msg) => {
            //console.log(msg)
            //message.value = msg;
            //visible.value = true;
        };
        onMounted(async () => {
           
        });

        // 隐藏消息的方法，并通过$nextTick模拟Vue 2的行为
        const hide = () => {
            visible.value = false;
        }; 
        // 返回方法，使其在模板中可用
        return {
            visible,
            show,
            hide,
        };  
    },
});
</script>

<style scoped>
    .message {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 10px;
        min-width: 140px;
        border-radius: 4px;
        z-index: 9999;
        text-align:center;
    }
    .message_info {
        background: #6AC2F5;
    }
    .message_success {
        background: #A6E33C;
    }
    .message_error {
        background: #FA727D;
    }
    .message_warning {
        background: #FDAC23;
    }
    .message_loading {
        background: rgba(22,119,255,0.8); 
    }    
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.3s;
    }


    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
</style>